<template>
  <div>
      <div v-show="!isLogining">
          <div v-if="isLogin">
            这些页面需要登陆才能够访问，请查看路由的全局钩子函数
          </div>
          <div v-if="!isLogin">
            登陆成功！正在跳转...
          </div>
      </div>
      
      <div v-show="isLogining">
          你已经登陆过啦，正在跳转中...
      </div>
      <div v-if="isLogin">
          <div v-show="!isLogining">
            <input type="text" placeholder="用户名" v-model="userId" ref="userIds" autofocus>
            <input type="text" placeholder="密码" v-model="password" ref="passwords" @keyup="submit">
            <input type="button" value="一键登录" @click="signIn" name="" id="">
          </div>
          <div v-show="!isLogining">
            <p>我才不会告诉你账号密码都是admin</p>
          </div>
      </div>
      
  </div>
</template>

<script>
export default {
    name: 'login',
    data(){
        return {
            isLogin:true,
            isLogining: false,
            userId: '',
            password: '',
        }
    },
    created (){
        this.isLogins();
    },
    methods:{
        isLogins(){
            // 判断是否登陆过
            let userIds = this.$local.fetch('userId');
            if(userIds.userName == 'admin'){
                this.isLogining = true;
                this.jump();
            }
        },
        signIn(){
            // 点击登陆
            let userIds = this.$refs.userIds.value;
            let passwords = this.$refs.passwords.value;
            // 假装我们登陆成功
            if(userIds == 'admin' && passwords == 'admin'){
                this.$local.save('userId', {
                    login: true,
                    userName: userIds
                })
                this.isLogin = !this.isLogin;
                this.jump();
            }else {
                alert('账号或者密码错误');
            }
        },
        jump(){
            setTimeout(() => {
                this.$router.push({name: 'home'});
            },500)
        },
        submit(e){
            if(e.keyCode == '13'){
                this.signIn()
            }
        }
    }
}
</script>

<style scoped lang="less">
 
</style>


